<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<!-- import CSS -->
		<link rel="stylesheet" href="/jeefast/mb/elementui-lib/lib/index.css">
		<link rel="stylesheet" href="/jeefast/mb/css/common.css">
		<title>添加研究阶段</title>
	</head>
	<body>
		<div id="app" v-cloak>
			<div class="pd10 border-bottom">
				<a href="projectManage.html">
					<el-button type="text" icon="el-icon-arrow-left">项目管理 - 研究阶段</el-button>
				</a>
			</div>
			<div class="pd10">
				<div class="research-title">
					<span>{{projName}}</span><span>{{resName}}</span>
				</div>
				<el-form ref="form" :model="form" label-width="150px">
					<el-form-item label="阶段名:" style="display:inline-block;">
						<el-input type="text" v-model="form.stepName" style="width:300px;"></el-input>
					</el-form-item>
					<el-form-item label="Lable:" style="display:inline-block;">
						<el-input type="text" v-model="form.lable" style="width:300px;"></el-input>
					</el-form-item>
					<el-form-item label="描述:">
						<el-input type="text" v-model="form.stepRemark" style="width:300px;"></el-input>
					</el-form-item>
					<el-form-item label="起始时间:">
						T0
						<el-select v-model="symbol1" style="width:100px;">
							<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
							</el-option>
						</el-select>
						<el-input type="number" v-model="form.mark1" onkeypress="return( /[\d]/.test(String.fromCharCode(event.keyCode) ) )" style="width:100px;"></el-input>
						天
					</el-form-item>
					<el-form-item label="截止时间:">
						T0
						<el-select v-model="symbol2" style="width:100px;">
							<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
							</el-option>
						</el-select>
						<el-input type="number" v-model="form.mark2" onkeypress="return( /[\d]/.test(String.fromCharCode(event.keyCode) ) )" style="width:100px;"></el-input>
						天
					</el-form-item>

					<el-form-item label="数据模板:">
						<el-select v-model="form.tempId" style="width:300px;" @change="changeTemplate">
							<el-option v-for="item in templateArr" :key="item.tempId" :label="item.tempName" :value="item.tempId">
							</el-option>
						</el-select>
						<el-button type="primary" icon="el-icon-plus" @click="templateShow">添加模板</el-button>
					</el-form-item>
					<!-- 添加/编辑模板  -->
					<div class="edittemplate" v-if="isShow==1">
						<el-form ref="formTemplate" :model="formTemplate">
							<el-form-item label="模板名:">
								<el-input type="text" v-model="tempName" style="width:300px;"></el-input>
							</el-form-item>
							<el-form-item label="主观指标" style="margin-bottom:0;"></el-form-item>
							<div class="ml20 indicators">
								<ul>
									<li v-for="(item,index) in arr1" v-show="(arr1num-1) == index">
										<span @click="checked('miShow',item.miShow,item.miType)" :class="item.miShow == 0 ? 'check_box' : 'check_box active'"></span>
										<span class="ft-14">食欲(1-10分)</span>
										<el-input-number v-model="arr1num" controls-position="right" @change="handleChange(item.miNumber,item.miType)"
										 :min="1" :max="10" style="width:100px;margin-left:10px;"></el-input-number>
										<el-input type="text" v-model="item.miRemark" style="width:300px;"></el-input>
										<span class="f-r">
											<span @click="checked('miMust',item.miMust,item.miType)" :class="item.miMust == 0 ? 'check_box' : 'check_box active'"></span>
											<span class="ft-14">必须</span>
										</span>
									</li>
									<li v-for="(item,index) in arr2" v-show="(arr2num-1) == index">
										<span @click="checked('miShow',item.miShow,item.miType)" :class="item.miShow == 0 ? 'check_box' : 'check_box active'"></span>
										<span class="ft-14">精神(1-10分)</span>
										<el-input-number v-model="arr2num" controls-position="right" @change="handleChange(item.miNumber,item.miType)"
										 :min="1" :max="10" style="width:100px;margin-left:10px;"></el-input-number>
										<el-input type="text" v-model="item.miRemark" style="width:300px;"></el-input>
										<span class="f-r">
											<span @click="checked('miMust',item.miMust,item.miType)" :class="item.miMust == 0 ? 'check_box' : 'check_box active'"></span>
											<span class="ft-14">必须</span>
										</span>
									</li>
									<li v-for="(item,index) in arr3" v-show="(arr3num-1) == index">
										<span @click="checked('miShow',item.miShow,item.miType)" :class="item.miShow == 0 ? 'check_box' : 'check_box active'"></span>
										<span class="ft-14">乏力(1-10分)</span>
										<el-input-number v-model="arr3num" controls-position="right" @change="handleChange(item.miNumber,item.miType)"
										 :min="1" :max="10" style="width:100px;margin-left:10px;"></el-input-number>
										<el-input type="text" v-model="item.miRemark" style="width:300px;"></el-input>
										<span class="f-r">
											<span @click="checked('miMust',item.miMust,item.miType)" :class="item.miMust == 0 ? 'check_box' : 'check_box active'"></span>
											<span class="ft-14">必须</span>
										</span>
									</li>
								</ul>
							</div>
							<el-form-item label="客观指标" style="margin-bottom:0;"></el-form-item>
							<div class="ml20 indicators">
								<ul>
									<li v-for="(item,index) in objectiveArr" :key="index">
										<span @click="checkedOi('oiShow',item.oiShow)" :class="item.oiShow == 1 ? 'check_box active' : 'check_box'"></span>
										<span class="ft-14">图片格式(.jpg/.png/.jpeg)</span>
										<span class="f-r">
											<span @click="checkedOi('oiMust',item.oiMust)" :class="item.oiMust == 1 ? 'check_box active' : 'check_box'"></span>
											<span class="ft-14">必须</span>
										</span>
									</li>
								</ul>
							</div>
							<el-form-item label="其他指标" style="margin-bottom:0;"></el-form-item>
							<div class="ml20 indicators">
								<ul>
									<li v-for="(item,index) in otherArr" :key="index">
										<span style="width:418px;float:left;">
											<span @click="checkedAi('aiShow',index)" :class="item.aiShow == 1 ? 'check_box active' : 'check_box'"></span>
											<span class="ft-14">{{({"1":"体重","2":"握力","3":"肱三头肌皮褶厚度","4":"体脂率","5":"改良SGA评分","6":"DP-care风险评估"}[item.aiType])}}</span>
										</span>
										<el-select v-model="item.aiUnit" style="width:100px;">
											<el-option v-for="unit in unitArr" :key="unit.value" :label="unit.label" :value="unit.value">
											</el-option>
										</el-select>
										<span class="f-r">
											<span @click="checkedAi('aiMust',index)" :class="item.aiMust == 1 ? 'check_box active' : 'check_box'"></span>
											<span class="ft-14">必须</span>
										</span>
									</li>
								</ul>
							</div>

							<el-form-item class="text-c">
								<el-button type="primary" @click="onSubmitTemplate">保存模板</el-button>
							</el-form-item>
						</el-form>
					</div>
					<el-form-item>
						<el-button type="primary" @click="onSubmit">保存</el-button>
					</el-form-item>
				</el-form>
			</div>
		</div>
	</body>
	<script src="/jeefast/mb/elementui-lib/lib/vue.js"></script>
	<script src="/jeefast/mb/elementui-lib/lib/index.js"></script>
	<script src="/jeefast/mb/js/jquery-1.9.1.min.js"></script>
	<script src="/jeefast/mb/js/axios.js"></script>
	<script src="/jeefast/mb/js/data.js"></script>
	<script>
		var app = new Vue({
			el: "#app",
			mixins: [mix],
			data: function() {
				return {
					tempId: "",
					resId: "",
					projId: "",
					stepId: "",
					projName: "",
					resName: "",
					options: [{
						value: '+',
						label: '+'
					}, {
						value: '-',
						label: '-'
					}],
					form: {
						lable: "",
						mark1: "0",
						mark2: "0",
						stepName: "",
						stepRemark: "",
					},
					// 加减
					symbol1: "+",
					symbol2: "+",
					mark1: "",
					mark2: "",
					// 模板
					templateArr: [],
					tempName: "",
					// 添加/编辑模板
					formTemplate: {
						name: "",
					},
					// 主观
					subjectiveArr: [],
					// 客观
					objectiveArr: [],
					// 其他
					otherArr: [],
					// 单位
					unitArr: [{
						value: 1,
						label: 'kg'
					}, {
						value: 2,
						label: 'cm'
					}, {
						value: 3,
						label: '%'
					}, {
						value: 4,
						label: '分'
					}, {
						value: 5,
						label: 'km'
					}],

					// 主观
					arr1: [],
					arr1Item: {},
					arr1num: 1,
					arr2num: 1,
					arr3num: 1,
					arr2: [],
					arr2Item: {},
					arr3: [],
					arr3Item: {},
					isShow: 0,
				}
			},
			methods: {
				checkedAi: function(type, index) {
					console.log(type, index)
					if (type == "aiMust") {
						this.otherArr[index].aiMust = this.otherArr[index].aiMust == 1 ? 0 : 1
					} else if (type == 'aiShow') {
						this.otherArr[index].aiShow = this.otherArr[index].aiShow == 1 ? 0 : 1
					}
				},
				checkedOi: function(type, checked) {
					if (type == 'oiMust') {
						if (checked == 0) {
							for (let i = 0; i < this.objectiveArr.length; i++) {
								this.objectiveArr[i].oiMust = 1
							}
						} else {
							for (let i = 0; i < this.objectiveArr.length; i++) {
								this.objectiveArr[i].oiMust = 0
							}
						}
					} else if (type == 'oiShow') {
						if (checked == 0) {
							for (let i = 0; i < this.objectiveArr.length; i++) {
								this.objectiveArr[i].oiShow = 1
							}
						} else {
							for (let i = 0; i < this.objectiveArr.length; i++) {
								this.objectiveArr[i].oiShow = 0
							}
						}
					}
				},
				checked: function(type, checked, mitype) {
					if (type == 'miMust') {
						if (checked == 0) {
							if (mitype == 1) {
								for (let i = 0; i < this.arr1.length; i++) {
									this.arr1[i].miMust = 1
								}
							} else if (mitype == 2) {
								for (let i = 0; i < this.arr2.length; i++) {
									this.arr2[i].miMust = 1
								}
							} else if (mitype == 3) {
								for (let i = 0; i < this.arr3.length; i++) {
									this.arr3[i].miMust = 1
								}
							}
						} else {
							if (mitype == 1) {
								for (let i = 0; i < this.arr1.length; i++) {
									this.arr1[i].miMust = 0
								}
							} else if (mitype == 2) {
								for (let i = 0; i < this.arr2.length; i++) {
									this.arr2[i].miMust = 0
								}
							} else if (mitype == 3) {
								for (let i = 0; i < this.arr3.length; i++) {
									this.arr3[i].miMust = 0
								}
							}
						}
					} else if (type == 'miShow') {
						if (checked == 0) {
							if (mitype == 1) {
								for (let i = 0; i < this.arr1.length; i++) {
									this.arr1[i].miShow = 1
								}
							} else if (mitype == 2) {
								for (let i = 0; i < this.arr2.length; i++) {
									this.arr2[i].miShow = 1
								}
							} else if (mitype == 3) {
								for (let i = 0; i < this.arr3.length; i++) {
									this.arr3[i].miShow = 1
								}
							}
						} else {
							if (mitype == 1) {
								for (let i = 0; i < this.arr1.length; i++) {
									this.arr1[i].miShow = 0
								}
							} else if (mitype == 2) {
								for (let i = 0; i < this.arr2.length; i++) {
									this.arr2[i].miShow = 0
								}
							} else if (mitype == 3) {
								for (let i = 0; i < this.arr3.length; i++) {
									this.arr3[i].miShow = 0
								}
							}
						}
					}
				},
				handleChange: function(number, type) {
					let num = Number(number - 1)
					console.log(num, type)
					if (type == 1) {
						this.arr1Index++
						this.arr1Item = this.arr1[num]
						this.arr1Item.miNumber = Number(num + 1)
					} else if (type == 2) {
						this.arr2Index = number
						this.arr2Item = this.arr2[num]
						this.arr2Item.miNumber = Number(num + 1)
					} else if (type == 3) {
						this.arr3Index = number
						this.arr3Item = this.arr3[num]
						this.arr3Item.miNumber = Number(num + 1)
					}
				},
				// 数据模板
				changeTemplate: function() {
					this.isShow = 1;
					this.tempId = this.form.tempId
					templateDetail({
						tempId: this.tempId
					}).then(res => {
						if (res.data.code == 0) {
							let mi = res.data.data.mi
							// console.log(mi)
							this.listShai(mi)
							// 其他							
							this.otherArr = res.data.data.ai;
							// 客观指标
							this.objectiveArr = res.data.data.oi
							// 模板名称
							this.tempName = res.data.template.tempName
						}
					})
				},
				//筛选数组
				listShai: function(arr) {
					this.arr1 = []
					this.arr2 = []
					this.arr3 = []
					for (let i = 0; i < arr.length; i++) {
						if (arr[i].miType == 1) {
							this.arr1.push(arr[i]);
							this.arr1Item = this.arr1[0]
						} else if (arr[i].miType == 2) {
							this.arr2.push(arr[i]);
							this.arr2Item = this.arr2[0]
						} else if (arr[i].miType == 3) {
							this.arr3.push(arr[i]);
							this.arr3Item = this.arr3[0]
						}
					}
				},
				IsNull: function() {
					let flag = false;
					if(this.form.stepName==""){
						this.$message.error('阶段名称不能为空');
						return flag = true;
					}
					if(this.form.lable==""){
						this.$message.error('Label不能为空');
						return flag = true;
					}
					if(this.form.stepRemark==""){
						this.$message.error('描述不能为空');
						return flag = true;
					}
					if(this.tempId==""){
						this.$message.error('请选择模板');
						return flag = true;
					}
				},
				// 保存
				onSubmit() {
					let that = this;
					if (that.IsNull()) {
						return;
					}
					// 加减
					if (this.symbol1 == '+') {
						this.mark1 = ''
					} else {
						this.mark1 = '-'
					}
					if (this.symbol2 == '+') {
						this.mark2 = ''
					} else {
						this.mark2 = '-'
					}
					let params={
						resId:this.resId,
						lable: this.form.lable,
						stepName: this.form.stepName,
						stepRemark: this.form.stepRemark,
						mark1: Number(this.mark1 + this.form.mark1),
						mark2: Number(this.mark2 + this.form.mark2),
						tempId:this.tempId
					}
					if(this.stepId){
						params.stepId = this.stepId
					}
					console.log(params)
					// console.log('---', this.form.mark1,this.form.mark2)
					researchStepAddOrSave(params).then(res=>{
						if(res.data.code==0){
							window.location.href="projectManage.html"
						}
					})
				},
				// 保存模板
				onSubmitTemplate: function() {
					if (this.tempName == "") {
						this.$message.warning('模板名不能为空')
						return
					}
					let params = {
						tempId: this.tempId, //传 编辑 不传 添加	
						tempName: this.tempName,
						projId: this.projId,
						resId: this.resId
					}
					// console.log(params)
					templateAddOrSave(params).then(res => {
						if (res.data.code == 0) {
							// console.log('===',res.data.id)
							if (res.data.id) {
								this.tempId = res.data.id
								this.addSubmitTemplate()
							} else {
								// this.getTemplateList(this.resId)
								this.addSubmitTemplate()
							}
						}
					})
				},
				addSubmitTemplate: function() {
					// console.log('==tempId==',this.tempId)
					this.subjectiveArr = [...this.arr1, ...this.arr2, ...this.arr3]
					for (let i = 0; i < this.subjectiveArr.length; i++) {
						if (this.subjectiveArr[i].tempId == "") {
							this.subjectiveArr[i].tempId = this.tempId
						}
					}
					let subjectiveArr = JSON.stringify(this.subjectiveArr)
					// console.log('========',JSON.stringify(subjectiveArr))
					// 修改主要指标
					miAddOrUpdate(subjectiveArr).then(res => {
						if (res.data.code == 0) {
							this.$message.success('修改成功')
						}
					})
					// 客观指标
					for (let i = 0; i < this.objectiveArr.length; i++) {
						if (this.objectiveArr[i].tempId == "") {
							this.objectiveArr[i].tempId = this.tempId
						}
					}
					let objectiveArr = JSON.stringify(this.objectiveArr)
					// console.log('------',objectiveArr)
					oiAddOrUpdate(objectiveArr).then(res => {
						if (res.data.code == 0) {
							this.$message.success('修改成功')
						}
					})
					// 其他指标					
					for (let i = 0; i < this.otherArr.length; i++) {
						if (this.otherArr[i].tempId == "") {
							this.otherArr[i].tempId = this.tempId
						}
					}
					let otherArr = JSON.stringify(this.otherArr)
					// console.log(otherArr)
					aiAddOrUpdate(otherArr).then(res => {
						if (res.data.code == 0) {
							this.$message.success('修改成功')
						}
					})
					this.getTemplateList()
				},
				// 模板列表
				getTemplateList: function() {
					templateList({
						resId: this.resId
					}).then(res => {
						if (res.data.code == 0) {
							this.templateArr = res.data.data
						}
					})
				},
				// 添加模板
				templateShow: function() {
					this.form.tempId = "", //清空选中模板
					this.isShow = 1;
					this.tempName = "";
					this.tempId = "";
					this.arr1 = [];
					this.arr2 = [];
					this.arr3 = [];
					this.asubjectiveArr = [];
					this.objectiveArr = [{
						oiId: "",
						oiType: 1,
						oiMust: 1,
						oiShow: 1,
						tempId: ""
					}];
					this.otherArr = [];
					for (let i = 1; i <= 6; i++) {
						let j = i
						if (i == 6) {
							j = 1
						}
						let params = {
							aiId: "",
							aiType: i, //1:体重 2：握力 3：肱三头肌皮褶厚度 4：体脂率 5：改良SGA评分 6：DP-care风险评估	展开
							aiUnit: j, //1:KG 2:cm 3:% 4:分 5：km	展开
							aiMust: 1,
							aiShow: 1,
							tempId: ""
						}
						this.otherArr.push(params)
					}
					for (let i = 1; i <= 10; i++) {
						let params = {
							miId: "",
							miNumber: i,
							miType: 1,
							miRemark: "",
							miMust: 1,
							miShow: 1,
							tempId: ""
						}
						this.arr1.push(params)
					}
					for (let i = 1; i <= 10; i++) {
						let params = {
							miId: "",
							miNumber: i,
							miType: 2,
							miRemark: "",
							miMust: 1,
							miShow: 1,
							tempId: ""
						}
						this.arr2.push(params)
					}
					for (let i = 1; i <= 10; i++) {
						let params = {
							miId: "",
							miNumber: i,
							miType: 3,
							miRemark: "",
							miMust: 1,
							miShow: 1,
							tempId: ""
						}
						this.arr3.push(params)
					}

				},
				// 研究阶段详情
				getResearchStepDetail: function(id) {
					researchStepDetail({
						id: id
					}).then(res => {
						if (res.data.code == 0) {
							this.form = res.data.data
							if (this.form.mark1 >= 0) {
								this.symbol1 = '+'
							} else {
								this.symbol1 = '-'
							}
							if (this.form.mark2 >= 0) {
								this.symbol2 = '+'
							} else {
								this.symbol2 = '-'
								this.form.mark2 = -(this.form.mark2)
							}
							// 编辑模板
							this.isShow = 1
							this.changeTemplate()
						}
					})
				}
			},
			created() {
				this.resId = getQueryString("resId");  //研究组ID
				this.stepId = getQueryString("stepId");  //研究阶段ID
				this.projId = getQueryString("projId");   //关联项目ID
				if (this.resId != null) {
					this.getTemplateList(); //模板列表
				}
				if (this.stepId != null) {
					this.getResearchStepDetail(this.stepId) //研究阶段详情
				}
				this.projName = localStorage.getItem('projName')
				this.resName = localStorage.getItem('resName')

			},
		});
	</script>
</html>
